<!-- 购物车列表 -->
<!--未登陆跳转到登陆页面 路由导航-->

<template>
  <div class="cartBox">
    <div v-show="this.cartlist" >
      <div v-for="(item,index,id) in cartlist" :key="id" class="cartDetails">
        <van-card
          :num="item.num"
          :price="item.selling_price"
          :title="item.goods_title"
          :thumb="item.goods_logo"
        >
          <div slot="bottom">
            <van-tag plain type="danger">小计:</van-tag>
            <van-tag plain type="danger">
              <span>{{'￥'+(item.selling_price * item.num).toFixed(2)}}</span>
            </van-tag>
          </div>
          <div slot="footer">
            <van-stepper v-model="cartlist[index].num" min="1" :max="cartlist[index].goods_stock" />
            <!-- <van-button size="mini" @click="addCollection(index,id)">收藏</van-button> -->
            <van-button size="mini" @click="delToCart(index,id)">删除</van-button>
          </div>
        </van-card>
      </div>
    </div>

    <div v-show="show2" class="nocart">购物车为空</div>
    <CartListBottom :totalPrice="totalPrice" :totalNumber="totalNumber" :cartlist="cartlist"></CartListBottom>
  </div>
</template>

<script>
import CartListBottom from "./CartListBottom";
export default {
  data() {
    return {
      cartlist: {},
      num: 1,
      Loading: true,
      show2: false
    };
  },
  methods: {
    //删除商品
    async delToCart(index, id) {
      console.log("取消商品");
      console.log(this.cartlist[index].id);
      let user_id = window.localStorage.getItem('user_id');
      let product_id = this.cartlist[index].id;
      console.log(product_id);
      await this.$http({
        method: "post",
        url: "index/web/delToCart",
        data: {
          user_id,
          product_id
        }
      }).then(res => {
        if (res.data.State.Code == 200) {
          
          this.$Notify({ type: "success", message: "成功移除购物车" });
          console.log(res);
          // 刷新一下页面 显示修改后的数据
        }
        this.cartDataInit();
      });
    },
    //token值判断 是否登陆 是否返回login界面
    //收藏商品
    async addCollection(index, id) {
      console.log(this.cartlist[index].id);
      console.log("收藏商品");
      let user_id = window.localStorage.getItem('user_id');
      let product_id = this.cartlist[index].id;
      await this.$http({
        method: "post",
        url: "index/web/addCollection",
        data: {
          user_id,
          product_id
        }
      }).then(res => {
        if (res.data.data.info == 1) {
          this.isA = true;
          // this.collection = res.data.data.info;
          //收藏成功 样式颜色改变
          //再次点击 收藏 取消收藏
        } else if (res.data.data.info == 0) {
          //已经收藏
          this.collection = false;
          this.$http({
            method: "post",
            url: "index/web/delCollection",
            data: {
              user_id,
              product_id
            }
          }).then(res => {
            console.log("取消收藏");
            this.isA = false;
            console.log(res);
          });
        }
        console.log(res);
      });
    },
    //跳转回产品详情
    // jumpDetails(id, pid, item) {
    //   console.log(id, pid);
    //   this.$router.push({
    //     name: "detail",
    //     params: {
    //       id,
    //       pid,
    //       item
    //     }
    //   });
    // },
    //购物车+-1
    async productAdd(value, id) {
      let user_id = window.localStorage.getItem('user_id');
      let num = value;
      let product_id = id;
      // console.log(user_id, value, id);
      if (user_id) {
        let Counter = await this.$http({
          method: "post",
          url: "index/web/productAdd",
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            user_id,
            product_id,
            num
          }
        });
        if (Counter.data.State.Code == 200) {
          console.log(Counter);
        }
      }
    },
    //获取购物车数据
    async cartDataInit() {
      this.Loading = false;
      let user_id = window.localStorage.getItem('user_id');
      console.log(user_id);
      if (user_id) {
        await this.$http({
          method: "post",
          url: "index/web/showCartList",
          // headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            user_id
          }
        })
          .then(res => {
            let carlist = {}
            console.log(res, "yes");
            if (res.data.State.Code == 200) {
              this.Loading = false;
              this.cartlist = res.data.data;
              console.log(this.cartlist)
            } else if (res.data.State.Code == 2005) {
              this.cartlist = {};
              this.Loading = true;
              this.show2 = true;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.Loading = false;
        this.show2 = true;
      }
    }
  },
  mounted() {
    this.cartDataInit();
  },
  computed: {
    // //总数量
    totalNumber() {
      console.log(this.cartlist, "sdadadadad");
      let num = 0;
      for (let j = 0; j < this.cartlist.length; j++) {
        num += this.cartlist[j].num;
        console.log(num);
      }
      return num;
    },
    //总价格
    totalPrice() {
      let Price = 0;
      for (let i = 0; i < this.cartlist.length; i++) {
        Price += this.cartlist[i].selling_price * this.cartlist[i].num;
        console.log(Price);
      }
      return Price;
    }
  },
  components: {
    CartListBottom
  }
};
</script>
<style lang='scss' scoped>
.cartBox{
  margin-bottom: 2rem;;
}
.cartDetails {
  van-tag {
    span {
      color: red;
      font-size: 16px;
    }
  }
  .van-stepper {
    padding-bottom: 5px;
  }
}

.nocart {
  text-align: center;
  font-size: 0.6486rem;
  line-height: 4.7027rem;
}
</style>